@use 'design-system' as *;

.campaignOuter {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: $spacing-size-8;
    max-width: Min(90ch, calc(100vw - $spacing-size-8));
    margin: $spacing-size-12 auto 0;
}

.homepageHero {
    background-color: var(--color-util-brand-500);
    color: var(--color-white);

    #{$selector-darkmode} & {
        background-color: var(--color-util-gray-100);
        border-bottom: 1px solid var(--color-util-gray-300);
    }
}

.heroInner {
    display: flex;
    flex-direction: column;
    gap: 0 $spacing-size-4;

    @media screen and (min-width: $breakpoint-site-header-large) {
        gap: 0 $spacing-size-8;
    }

    @media screen and (min-width: $breakpoint-hero-large) {
        flex-direction: row;
    }
}

.heroHeadings {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: $spacing-size-10;
    padding-bottom: $spacing-size-10;
    min-width: 500px;

    @media screen and (max-width: $breakpoint-hero-small) {
        min-width: 100%;
    }

    @media screen and (min-width: $breakpoint-hero-small) {
        padding-top: $spacing-size-10;
    }

    @media screen and (min-width: $breakpoint-hero-large) {
        align-items: flex-start;
        padding-top: $spacing-size-20;
        text-align: unset;
    }

    h1,
    h2 {
        color: var(--color-white);
    }

    h1 {
        margin-bottom: 0;
        font-size: 28px;
        line-height: 1.1;

        @media screen and (min-width: $breakpoint-hero-small) {
            font-size: var(--text-fs-2xl);
        }

        @media screen and (min-width: $breakpoint-hero-large) {
            font-size: min(3.4vw, 40px);
        }
    }

    h2 {
        max-width: 18em;
        margin-top: $spacing-size-10;
        margin-bottom: 1.4em;
        font-weight: var(--text-regular);
        line-height: 1.25;

        @media screen and (min-width: $breakpoint-hero-small) {
            font-size: 22px;
        }

        @media screen and (min-width: $breakpoint-hero-large) {
            max-width: unset;
        }
    }

    div:last-child {
        display: flex;
        flex-wrap: wrap;
        gap: $spacing-size-2;
    }

    a {
        padding: 6px 12px;
        background-color: var(--color-white);
        color: var(--color-brand-500);
        transition: opacity 0.3s;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: $spacing-size-2;
        transition: opacity 0.3s;

        #{$selector-darkmode} & {
            background-color: var(--color-white);
            color: var(--color-brand-500);
        }

        &:first-child {
            background-color: transparent;
            color: var(--color-white) !important;
            border-width: 2px;

            :global(.icon) {
                --icon-color: var(--color-white);
            }
        }

        &:last-child {
            &:hover {
                color: var(--color-brand-500);
            }
        }

        :global(.icon) {
            --icon-size: 1.3333em;
            --icon-color: var(--color-brand-500);

            transition: transform 0.25s ease-in-out;
        }

        &:first-child:hover :global(.icon) {
            transform: translateX(4px);
        }

        &:last-child:hover :global(.icon) {
            transform: scale(1.05);
        }
    }

    code {
        color: var(--color-white);
        background-color: color-mix(in srgb, var(--color-brand-200) 20%, transparent);
        border-color: color-mix(in srgb, var(--color-brand-200) 20%, transparent);
    }
}

.noWrap {
    white-space: nowrap;
}

.heroTopLine {
    display: flex;
}

@keyframes scroll-hero {
    from {
        background-position-y: 0;
    }

    to {
        background-position-y: 500%;
    }
}

.galleryScrollerExample {
    background: white;

    #{$selector-darkmode} & {
        background: var(--color-bg-primary);
    }
}

.autoICExample {
    width: 100%;
    max-width: 1400px;
    margin-top: $spacing-size-8;
    margin-bottom: $spacing-size-16;

    footer:last-of-type {
        margin-top: $spacing-size-6;
        justify-content: center;
    }

    @media screen and (min-width: 1020px) {
        width: 80vw;
    }

    @media screen and (min-width: 1400px) {
        :global(div[class*='automated']) {
            aspect-ratio: 2 / 1;
        }
    }
}

.campaignBenefitsContainer {
    --benefitsBG: #fbfbfc;

    position: relative;
    display: flex;
    gap: $spacing-size-8 $spacing-size-4;
    background-color: var(--benefitsBG);
    margin: $spacing-size-16 0;
    padding: $spacing-size-16 0;
    position: relative;
    text-align: center;

    #{$selector-darkmode} & {
        --benefitsBG: color-mix(in srgb, var(--color-fg-primary), var(--color-bg-primary) 98%);
    }

    @media screen and (max-width: 840px) {
        flex-wrap: wrap;
    }

    &::before,
    &::after {
        position: absolute;
        content: '';
        top: 0;
        bottom: 0;
        width: 100vw;
        background-color: var(--benefitsBG);
        pointer-events: none;
    }

    &::before {
        left: -100vw;
    }

    &::after {
        right: -100vw;
    }
}

.campaignBenefitsList {
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid var(--color-util-gray-200);
    border-radius: 8px;
    padding: $spacing-size-4;
    box-shadow: 0 2px 4px #0000001a;
    background-color: var(--color-bg-primary);

    #{$selector-darkmode} & {
        border-color: var(--color-util-gray-300);
        background-color: #192232;
    }

    h2 {
        font-size: var(--text-fs-2xl);
        line-height: var(--text-lh-2xl);
        margin-bottom: $spacing-size-6;
        color: var(--color-brand-500);

        #{$selector-darkmode} & {
            color: var(--color-brand-200);
        }
    }

    ul {
        text-align: left;
        width: 50ch;
        margin-bottom: auto;

        @media screen and (max-width: $breakpoint-landing-page-medium) {
            width: auto;
        }
    }

    li {
        margin-bottom: $spacing-size-3;
    }

    a {
        margin-top: $spacing-size-4;
    }

    svg {
        --icon-size: #{$spacing-size-6};

        margin-left: $spacing-size-2;
    }
}

// license-pricing.module.scss content
// ===================================
.trialLicence {
    display: flex;
    flex-direction: column;
    gap: $spacing-size-4 $spacing-size-10;
    padding-bottom: $spacing-size-16;
    text-align: left;

    > .trialLicenceSeparator {
        width: 1px;
        align-self: stretch;
    }

    @media screen and (min-width: $breakpoint-pricing-medium) {
        flex-direction: row;
        align-items: center;
        padding-bottom: $spacing-size-20;
    }
}

.trialLicenceCopy {
    flex: 1;
    padding-top: $spacing-size-4;
    padding-bottom: $spacing-size-8;

    h3 svg {
        --icon-size: 36px;

        margin-right: $spacing-size-2;
        transform: translateY(-3px);
    }

    h4 svg {
        --icon-size: #{$spacing-size-6};

        margin-right: $spacing-size-2;
        transform: translateY(-2px);
    }

    > p {
        margin-bottom: $spacing-size-10;
    }

    > .trialLicenceSeparator {
        height: 1px;
        margin-top: $spacing-size-6;
        margin-bottom: $spacing-size-6;
    }
}

.trialLicenceCopyItem {
    --icon-color: var(--color-link);

    display: flex;

    svg {
        flex-shrink: 0;
        margin-right: $spacing-size-2;
        transform: translateY(-$spacing-size-1);
    }

    b {
        color: var(--color-fg-primary);
    }
}

.enterpriseIcon {
    --icon-color: var(--color-enterprise-icon);
}

.trialLicenceSeparator {
    background-color: var(--color-border-secondary);
}

.trialLicenceForm {
    flex: 1;
}

.licenceKeyDocs {
    --section-background-color: var(--color-util-brand-50);

    padding-top: $spacing-size-12;
    padding-bottom: $spacing-size-6;

    #{$selector-darkmode} & {
        --section-background-color: var(--color-util-gray-100);
    }
}
.licensesOuter {
    /* mobile breakpoint responsive */
    @media screen and (max-width: $breakpoint-pricing-medium) {
        display: flex;
        flex-direction: column;
        gap: $spacing-size-8;
        padding-top: $spacing-size-3;
    }

    .desktopTableContainer {
        display: none;
    }
}

// end license-pricing.module.scss content
// =======================================
.quotesOuter {
    display: flex;
    max-width: 1400px;
    border: 1px solid var(--color-border-secondary);
    border-radius: 8px;

    @media screen and (min-width: 900px) {
        width: 80vw;
    }

    @media screen and (max-width: 660px) {
        flex-direction: column;
    }
}

.quote {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 33.33%;
    font-size: var(--text-fs-base);
    line-height: var(--text-lh-2xl);
    padding: $spacing-size-10;

    @media screen and (max-width: $breakpoint-pricing-medium) {
        width: 100%;
    }

    &:not(:last-child) {
        border-right: 1px solid var(--color-border-secondary);

        @media screen and (max-width: 660px) {
            border-bottom: 1px solid var(--color-border-secondary);
            border-right: none;
        }
    }

    blockquote {
        font-size: var(--text-fs-lg);
        font-weight: var(--text-semibold);
        margin-bottom: $spacing-size-6;
        color: var(--color-fg-primary);
        text-indent: -0.5em;

        &::before {
            content: '“';
        }

        &::after {
            content: '”';
        }
    }

    p {
        font-style: italic;
    }
}

.finalCTA {
    text-align: center;
    margin: $spacing-size-10 auto $spacing-size-32;

    div {
        margin-top: $spacing-size-4;
        font-size: var(--text-fs-lg);
    }
}
